<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖系统</title>
    <link rel="stylesheet" href="css/index.css" type="text/css">
    <link rel="stylesheet" href="./WSContextmenu/WSContextmenu.css">
    <script src="js/WSJQuery.js" type="text/javascript"></script>
    <script src="./WSContextmenu/WSContextmenu.js" type="text/javascript"></script>
</head>
<body>
    <div class="bgDiv">
        <div class="left">
            <div class="exit button" onclick="exit()">x</div>
            <div class="restart button" onclick="restart()">o</div>
            <div class="title"></div>
            <div class="showName">开奖区</div>
            <div class="btnControls">
                <button type="button" id="btnStart" onclick="startPrize()">开始</button>
                <button type="button" id="btnStop" onclick="stopPrize()" disabled>停止</button>
            </div>
        </div>
        <div class="rigth">
            <p class="result-title">抽奖结果</p>
            <ul class="resultList">
                <!-- <li>啊大</li>
                <li>阿二</li>
                <li>阿三</li>
                <li>阿四</li>
                <li>啊五</li>
                <li>啊六</li> -->
            </ul>
        </div>
    </div>

    <script>
        //禁用掉F12键
        document.addEventListener("keydown",function(event){
        if(event.code=="F12"){
            event.preventDefault();
        }
    })
    //禁用掉鼠标右击事件
//     $(".bgDiv").addContextMenu({
//     id:"menu1",
//     items:[{
//         text:"重新开始",
//         click:function(){
//             // localStorage.removeItem("prizeArr");
//             // localStorage.removeItem("persons");
//             localStorage.clear();  //它清空的是当前域下面所有的缓存
//             location.reload();     //重新加载当前页面，相当于刷新当前页
//         }
//     },{
//         text:"退出抽奖",
//         click:function(){
//             if(confirm("确定要退出抽奖吗?")){
//                 window.close();
//             }
//         }
//     }]
// });

    
    //滚动屏效果
    $(".title").rollingText("子瓜瓜的抽奖系统",500);

    //------------以下为抽奖功能区--------------

    var persons = ["子瓜","长安","故里","马云","仙女","雷军"];
    var prizeArr = [];//中奖人员名单
    var showName = document.querySelector(".showName");
    var btnStart = document.querySelector("#btnStart");
    var btnStop = document.querySelector("#btnStop");
    var resultList = document.querySelector(".resultList");


    //开始抽奖
    function startPrize(){
        // 每次抽奖前判断抽奖人员是否还有剩余
        if(persons.length<=0){
            // 弹出提示框
            alert("抽奖人数为0，抽奖结束");
            //退出方法
            return;
        }
        
        //使用循环定时器，每一段时间后随机显示一个姓名
         //id前面不加var id变为全局变量，可以在其他方法里面调用（random也是一样）    
         id = setInterval(function(){
            //random：存放一个0-字符串长度之间的一个随机数
            //parseInt()向下取整
            //Math.random()随机生成一个0-1之间的随机数
            random = parseInt(Math.random()*persons.length);
            // 把取到的人赋值给showName
            showName.innerText=persons[random];
        },100);

        //系统开始运行后禁用启动按钮，启用停止按钮
        btnStart.disabled=true;
        btnStop.disabled=false;
    }

    //把中奖的人名传入右边的中奖人中(假定传入prizeName参数为获奖人名字)
    function appendPrizeName(prizeName){
        //在页面上创建一个li标签
        var li = document.createElement("li");
        //把姓名传入到li标签中
        li.innerText=prizeName;
        //把li标签添加到ul标签下面
        resultList.appendChild(li);

    }

    //停止抽奖
    function stopPrize(){
        //点击后停止循环定时器
        clearInterval(id);
        //点击暂停后禁用暂停，启用启动按钮
        btnStart.disabled=false;
        btnStop.disabled=true;
        //定义一个获奖人的名字，传入本次抽中的人名
        var prizeName = persons[random];
        //把参数导入保存右边方法里面
        appendPrizeName(prizeName);
        //在抽奖人员中删除中奖的人：splice(截取人的索引号,截取长度)
        persons.splice(random,1);
        
        //以下解决页面误关闭，把获奖人员名单保存到本地缓存localStorage中
        //将中奖人员名单保存起来
        prizeArr.push(prizeName);
        //将名单保存到缓存里面localStorage
        localStorage.setItem("prizeArr",prizeArr);
        //再将剩下来的人名单保存到缓存中
        localStorage.setItem("persons",persons);
    }

    //加载缓存中的名单
    function loadPrizeName(){
        //首先判断缓存当中有没有获奖人员名单
        if(localStorage.getItem("prizeArr") != null && localStorage.getItem("prizeArr") != "" ){
            //判断成立，缓存里面有内容
            //把缓存里面的字符串内容变成数组，赋值给prizeArr
            prizeArr = localStorage.getItem("prizeArr").split(",");
            //遍历prizeArr，把里面的名字保存到页面右边的获奖区
            prizeArr.forEach(function(itme,index,a){
                //调用之前写好的加载方法
                appendPrizeName(itme);
            });
        }
        //再判断剩下人员名单，再次加载
        if(localStorage.getItem("persons") != null && localStorage.getItem("persons") != "" ){
            persons = localStorage.getItem("persons").split(",");
        }

        //判断获奖缓存区中有人，待开奖缓存区没人，则所有人都已经抽完
        if(localStorage.getItem("prizeArr") != null && localStorage.getItem("prizeArr") != "" ||localStorage.getItem("persons") == null && localStorage.getItem("persons") == "" ){
            // 把persons的数组直接清空，再按开始时直接弹出结束提示
            persons = [];
        }
    }
    //每次页面加载时自动调用查询缓存
    loadPrizeName();

    //------------以上为抽奖功能区--------------

    //退出系统
    function exit(){
        if(confirm("确定要退出抽奖吗?")){
                window.close();
            }
    }
    // 重置抽奖
    function restart(){
        if(confirm("是否重置获奖人?（开启新一轮抽奖）")){
                //  localStorage.removeItem("prizeArr");
                // localStorage.removeItem("persons");
                localStorage.clear();  //它清空的是当前域下面所有的缓存
                location.reload();     //重新加载当前页面，相当于刷新当前页
            }
    }



$("body").addContextMenu({
        id:"menu1",
        items:[{
            text:"退出" ,
            click:function(){
                if(confirm("确定要退出抽奖吗?")){
                window.close();
            }
            }
        },{
            text:"重置",
            click:function(){
                if(confirm("是否重置获奖人?（开启新一轮抽奖）")){
                //  localStorage.removeItem("prizeArr");
                // localStorage.removeItem("persons");
                localStorage.clear();  //它清空的是当前域下面所有的缓存
                location.reload();     //重新加载当前页面，相当于刷新当前页
            }
            }            
        }]
    });

    // //把网页的右击事件禁用掉
    // var bgDiv = document.querySelector(".bgDiv");
    // // 在整个页面上绑定一个右击事件
    // bgDiv.addEventListener("contextmenu",function(event){
    //     //把这个事件本身传入进去
    //     event=window.event||event;
    //     //阻止事件的默认行为
    //     event.preventDefault();
    // });
</script>

</body>
</html>